<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>直播列表</title>
<link href="${base}/resources/admin/css/amazeui.css" rel="stylesheet" type="text/css" />
<link href="${base}/resources/admin/css/common.css" rel="stylesheet" type="text/css" />

</head>
<body>
	<div class="path">
		<a href="${base}/asl-admin/common/index.htm">${message("admin.path.index")}</a> &raquo; 直播列表 <span>(${message("admin.page.total", page.total)})</span>
	</div>
	<form id="listForm" action="list.htm" method="get">
        <input type="hidden" id="liveStatus" name="liveStatus" value="${liveStatus}" />
		<div class="bar">
			<div class="buttonWrap">
				<a href="javascript:" id="deleteButton" class="iconButton disabled">
					<i class="iconfont icon-icon27">&nbsp;</i>${message("admin.common.delete")}
				</a>
				<a href="javascript:" id="refreshButton" class="iconButton">
					<i class="iconfont icon-shuaxin1">&nbsp;</i>${message("admin.common.refresh")}
				</a>
				<div class="menuWrap">
					<a href="javascript:" id="pageSizeSelect" class="button">
						${message("admin.page.pageSize")}<span class="arrow">&nbsp;</span>
					</a>
                    <div class="menuWrap">
                        <a href="javascript:" id="filterSelect" class="button">
						${message("Live.LiveStatus")}<span class="arrow">&nbsp;</span>
                        </a>
                        <div class="popupMenu">
                            <ul id="filterOption" class="check">
                                <li>
                                    <a href="javascript:" name="liveStatus" val="nolive"[#if liveStatus == "nolive"] class="checked"[/#if]>${message("Live.LiveStatus.nolive")}</a>
                                </li>
                                <li>
                                    <a href="javascript:" name="liveStatus" val="live"[#if liveStatus == "live"] class="checked"[/#if]>${message("Live.LiveStatus.live")}</a>
                                </li>
                                <li>
                                    <a href="javascript:" name="liveStatus" val="finished"[#if liveStatus == "finished"] class="checked"[/#if]>${message("Live.LiveStatus.finished")}</a>
                                </li>
                            </ul>
                        </div>
                    </div>

					<div class="popupMenu">
						<ul id="pageSizeOption">
							<li>
								<a href="javascript:"[#if page.pageSize == 10] class="current"[/#if] val="10">10</a>
							</li>
							<li>
								<a href="javascript:"[#if page.pageSize == 20] class="current"[/#if] val="20">20</a>
							</li>
							<li>
								<a href="javascript:"[#if page.pageSize == 50] class="current"[/#if] val="50">50</a>
							</li>
							<li>
								<a href="javascript:"[#if page.pageSize == 100] class="current"[/#if] val="100">100</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="menuWrap">
				<div class="search">
					<span id="searchPropertySelect" class="arrow">&nbsp;</span>
					<input type="text" id="searchValue" name="searchValue" value="${page.searchValue}" maxlength="200" placeholder="请输入收索条件"/>
					<button type="submit">&nbsp;</button>
				</div>
				<div class="popupMenu">
					<ul id="searchPropertyOption">
						<li>
							<a href="javascript:"[#if page.searchProperty == "title"] class="current"[/#if] val="title">直播标题</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<table id="listTable" class="list">
			<tr>
				<th class="check">
					<input type="checkbox" id="selectAll" />
				</th>
				<th>
					<a href="javascript:" class="sort" name="title">标题</a>
				</th>
				<th>
					<a href="javascript:" class="sort" name="anchor">主播用户名</a>
				</th>
				<th>
					<span>实时观看人数</span>
				</th>
				<th>
					<span>历史观看人数</span>
				</th>
                <th>
                    <span>机器人数</span>
                </th>
				<th>
					<a href="javascript:" class="sort" name="timeSpan">直播时长</a href="javascript:" class="sort" name="timeSpan">
				</th>
				<th>
					<a href="javascript:" class="sort" name="liveStatus">直播状态</a>
				</th>
                <th>
                    <a href="javascript:" class="sort" name="createDate">创建时间</a>
                </th>
				<th>
                    <span>${message("admin.common.handle")}</span>
                </th>
			</tr>
			[#list page.content as live]
				<tr>
					<td>
						<input type="checkbox" name="ids" value="${live.id}" />
					</td>
					<td>
						${live.title}
					</td>
					<td>
						[#if live.anchor??]
						${live.anchor.username}(${live.anchor.name!'-'})
						[/#if]
					</td>
					<td>
						${live.watchCountWithoutRobot}
					</td>
					<td>
						${live.hisWatchCountWithoutRobot}
					</td>
                    <td>
						${live.hisWatchRobotCount}
                    </td>
					<td>
						${live.timeSpanChinese}
					</td>
					<td>
						[#if live.liveStatus=="nolive"]
							<span class="am-badge am-badge-primary am-radius">${message("Live.LiveStatus." + live.liveStatus)}</span>
						[#elseif live.liveStatus=="live"]
							<span class="am-badge am-badge-secondary am-radius">${message("Live.LiveStatus." + live.liveStatus)}</span>
						[#elseif live.liveStatus=="finished"]
							<span class="am-badge am-badge-success am-radius">${message("Live.LiveStatus." + live.liveStatus)}</span>
						[#else ]
							<span class="am-badge am-badge-danger am-radius">${message("Live.LiveStatus." + live.liveStatus)}</span>
						[/#if]
					</td>
                    <td>
						${live.createDate?string("yyyy-MM-dd HH:mm:ss")}
                    </td>
					<td>
                        <a href="edit.htm?id=${live.id}"><i class="iconfont icon-bianji edit-icon" ></i></a>
					</td>
				</tr>
			[/#list]
		</table>
		[@pagination pageNumber = page.pageNumber totalPages = page.totalPages]
			[#include "/admin/include/pagination.ftl"]
		[/@pagination]
	</form>
</body>
<script type="text/javascript" src="${base}/resources/admin/js/jquery.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/common.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/list.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/amazeui.min.js"></script>
<script type="text/javascript">
    $().ready(function() {

        var $listForm = $("#listForm");
        var $filterSelect = $("#filterSelect");
        var $filterOption = $("#filterOption a");

	[@flash_message /]
        $filterSelect.mouseover(function() {
            var $this = $(this);
            var offset = $this.offset();
            var $menuWrap = $this.closest("div.menuWrap");
            var $popupMenu = $menuWrap.children("div.popupMenu");
            $popupMenu.css({left: offset.left, top: offset.top + $this.height() + 2}).show();
            $menuWrap.mouseleave(function() {
                $popupMenu.hide();
            });
        });

        // 筛选选项
        $filterOption.click(function() {
            var $this = $(this);
            var $dest = $("#" + $this.attr("name"));
            if ($this.hasClass("checked")) {
                $dest.val("");
            } else {
                $dest.val($this.attr("val"));
            }
            $listForm.submit();
            return false;
        });

    });
</script>
</html>
